<template>
	<view class="control">
		<view class="flex-col group_4">
			<view class="flex-col section_1">
				<view class="flex-row justify-between group_5">
					<text class="text_2">预约课时</text>
					<view class="flex-row">
						<text class="text_3">{{class_hour_name}}</text>
						<!-- <image class="image_5 image_6"
							src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61a70accdc329c0011116ca9/16576959546784589311.png" /> -->
					</view>
				</view>
				<view class="flex-col">
					<view class="flex-row justify-between group_8">
						<text class="text_4">教练</text>
						<view class="flex-row">
							<image class="image_7"
								src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61a70accdc329c0011116ca9/16506183102482668300.png" />
							<text class="text_5">{{coach_name}}</text>
						</view>
					</view>
					<view class="flex-row justify-between group_10">
						<text class="text_6">学生</text>
						<!-- @click="onSwitch" -->
						<view class="flex-row" >
							<image class="image_7" :src="cover" />
							<text class="text_7">{{student_name}}</text>
							<!-- <image class="image_5 image_10"
								src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61a70accdc329c0011116ca9/16576959546784589311.png" /> -->
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="title-box flex-space-between">
			<view class="title">预约教练空闲时间</view>
			<!-- <view @click="href">编辑</view> -->
		</view>
		<view class="week-list flex-align">
			<view class="mouth">
				<view>{{nowMouth}}</view>
				<view>月</view>
			</view>
			
			<!-- <view class="week-item" :class="{'active':item.day == selectDay}" v-for="item in weekList" :key="item"
				@click="selectWeek(item)"> -->
			<view class="week-item" :class="{'active':dayActive == index}"   v-for="(item,index) in weekList" :key="index"
				@click="selectWeek(item,index)">
				<view>
					{{item.weeks}}
				</view>
				<view>{{item.mouth}}/{{item.day}}</view>
			</view>
		</view>

		<view class="scroll" style="overflow: unset;">
			<view class="time-list">
				<!-- <view class="time-item" :class="{'disabled':item > 6,'active':item === selectTime}" v-for="item in 9"
					:key="item" @click="handSelectTime(item)">
					<view class="top">
						<view>09:00</view>
						<view>~</view>
						<view>10:00</view>
					</view>
					<view class="bottom">0/3人</view>
				</view> -->

				<!-- <view class="time-item" :class="{'active':item.starttime > time_list,'disabled':item.endtime < time_list,'select-ash':index === selectTime}" v-for="(item,index) in list"
					:key="item" @click="handSelectTime(item,index)"> -->
				<!-- 最新 -->
				<!-- <view class="" v-for="(item,index) in list":key="item">
						<view class="time-item" :class=" item.endtime > time_list && item.check== false ? index === selectTime ?'select-ash':'active' : 'disabled'"  @click="handSelectTime(item,index)" v-if="item.check == false &&  item.endtime > time_list">
							<view class="scc">
								<view class="top" >
									<view>{{item.starttime}}</view>
									<view>~</view>
									<view>{{item.endtime}}</view>
								</view>
								<view class="bottom" >{{item.peosol}}</view>
							</view>
						</view>
						
						<view class="time-item" :class=" item.endtime > time_list && item.check== false ? index === selectTime ?'select-ash':'active' : 'disabled'"  v-else>
							<view class="scc">
								<view class="top" >
									<view>{{item.starttime}}</view>
									<view>~</view>
									<view>{{item.endtime}}</view>
								</view>
								<view class="bottom" >{{item.peosol}}</view>
							</view>
						</view>
					</view> -->
				<view class="" v-for="(item,index) in list" :key="item">
					<!-- :style="{backgroundImage:'url('+images+')'}" 背景图-->
					<view class="time-item" @click="handSelectTime(item,index)" v-if="item.status == 1" :style="{ backgroundImage: 'url('+item.backgroundImage+')',backgroundColor:item.background }"
						:class=" year_month_daylsit < item.course_date || (year_month_daylsit==item.course_date && item.end_time > time_list) && item.check== true && item.status == 1 ? index === selectTime ?'select-ash':'active' : 'disabled'"
						>
						<view class="scc" v-if="!item.backgroundImage && item.check == true">
							<view class="top">
								<view>{{item.start_time}}</view>
								<view>~</view>
								<view>{{item.end_time}}</view>
							</view>
						<!-- 	<view class="bottom" ></view> -->
						</view>
						<view class="scc" v-else>
							<view class="top" >
								<view></view>
								<view></view>
								<view></view>
							</view>
							<!-- <view class="bottom" ></view> -->
						</view>
					</view>
					<view class="time-item"  @click="handSelectlist(item,index)"  v-else :style="{ backgroundImage: 'url('+item.backgroundImage+')',backgroundColor:item.background }"
						:class=" year_month_daylsit < item.course_date || (year_month_daylsit==item.course_date && item.end_time > time_list) && item.check== true && item.status == 1 ? index === selectTime ?'select-ash':'active' : 'disabled'"
						>
						<view class="scc" v-if="!item.backgroundImage && item.check == true">
							<view class="top">
								<view>{{item.start_time}}</view>
								<view>~</view>
								<view>{{item.end_time}}</view>
							</view>
						<!-- 	<view class="bottom" ></view> -->
						</view>
						<view class="scc" v-else>
							<view class="top" >
								<view></view>
								<view></view>
								<view></view>
							</view>
							<!-- <view class="bottom" ></view> -->
						</view>
					</view>
				</view>


				<!-- <view class="time-item" v-for="(item,index) in list" :key="item" @click="handSelectTime(item,index)" >
					<view class="" v-if="item.text && item.text != '' ">
						<view
							:class="!able_list && item.endtime > time_list ? 'active' :  item.text == able_list && item.endtime > time_list ? 'active' : 'disabled'">
							<view class="scc" v-show="!item.check">
								<view class="top" >
									<view>{{item.starttime}}</view>
									<view>~</view>
									<view>{{item.endtime}}</view>
								</view>
								<view class="bottom" >{{item.peosol}}</view>
							</view>
						</view>
					</view>
					<view class="" v-else>
						<view class="disabled">
							<view class="scc" v-show="!item.check">
								<view class="top">
									<view>2222</view>
									<view></view>
									<view></view>
								</view>
								<view class="bottom"></view>
							</view>
						</view>
					</view>

				</view> -->
			</view>
			<view class="note">
				<textarea placeholder="预约备注" v-model="note"></textarea>
			</view>
		</view>


		<view class="footer">
			<view class="btn" @click="appoint">确认预约</view>
		</view>

		<u-popup :show="showChooseStudent" mode="center" @close="showChooseStudent = false" :safeAreaInsetBottom="false"
			round="20rpx" closeable customStyle="width: 90%;">
			<view class="choose-student">
				<view class="title"> 选择想要查看的学生 </view>

				<scroll-view class="student-list" scroll-y>
					<!-- <view v-for="(item, index) in studentList" :key="item.id" class="student-item flex-align"
						@click="chooseStudent(index, item.id)"> -->
					<view v-for="(item, index) in studentList" :key="index" class="student-item flex-align"
						@click="chooseStudent(item, index)">
						<u-avatar size="100rpx" :src="item.head_img" shape="circle" ></u-avatar>
						<view style="margin-left: 30rpx">
							<!-- 	<view class="flex-align">
								<view class="name">{{ item.student_info["姓名"] }}</view>
								<u-icon :name="item.student_info['性别'] === '男' ? 'man' : 'woman'" size="30rpx"
									:color="
		          item.student_info['性别'] === '男' ? '#016dff' : '#ff0178'
		        "></u-icon>
							</view>
							<view class="course">年龄: {{ item.student_info["年龄"] }}</view> -->
							<view class="flex-align">
								<view class="name">{{item.name}}</view>
								<!-- <u-icon :name="item.student_info['性别'] === '男' ? 'man' : 'woman'" size="30rpx"
												:color="
							  item.student_info['性别'] === '男' ? '#016dff' : '#ff0178'
							"></u-icon> -->
							</view>
							<view class="course">{{item.mobile}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	const index = require("@/api/personal/index.js");
	export default {
		data() {
			return {
				dayActive: 0,
				showChooseStudent: false,
				time_list: '',
				nowMouth: 1, //现在月份
				weekList: [],
				selectDay: '', //存储的日
				selectTime: '', //选择时间
				note: '', //备注
				list: [],
				able_list: null,
				time_list: '',
				today: '',
				images: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/4265ed81971303fe0bf340c7d26b82672aa2e668.png',
				index: '',
				each_num: {
					days: 7, // 选择天数
				},
				else_color:0,
				studentList: [],//学员信息
				forlist: {//学员信息
					name: '',
					head_img: '',
					mobile: '',
					id: '',
					custodian:''
				},
				listQuery: { //分页
					limit: 7,
					page: 1,
				},
				totalPage: "",
				classDatalist: [],
				train_item_id:"",
				coach_name:'',
				class_hour_name:'',
				coach_id:'',
				year_month_day:'',
				year_month_daylist:'',
				year_month_daylsit:'',
				istext:0,
				class_record_id:'',
				student_name:"",
				cover:''
			}
		},
		onLoad(options) {
			console.log(options,'6666')
			this.train_item_id = options.train_item_id
			this.coach_name = options.coach_name
			this.class_hour_name = options.class_hour_name
			this.coach_id = options.coach_id
			this.class_record_id = options.class_record_id
			this.student_name = options.student_name
			this.getCurrentMonthDay()
			this.createWeekList()
			this.hourlist()
			this.chooseStudentData()
			
		},
		methods: {
			// 教练可约时间颗粒
			async hourlist() {
				let param = {
					project_id: getApp().globalData.projectId,
					openid: uni.getStorageSync("openid"),
					app_id: this.$https.weixinAppId,
					train_item_id:this.train_item_id ,
					date:this.year_month_day,
					coach_id:this.coach_id
				};
				let res = await index.hourlist(param);
				if (res.code == 1) {
					this.list = res.data.list
					this.images = res.data.mini_icon
				}
			},
			// 约课
			async appoint() {
				let param = {
					project_id: getApp().globalData.projectId,
					openid: uni.getStorageSync("openid"),
					app_id: this.$https.weixinAppId,
					class_record_id:this.class_record_id,
					course_hour_id:this.course_hour_id,
					appointment_text:this.note
				};
				let res = await index.appoint(param);
				if (res.code == 1) {
					uni.navigateBack({
							delta:1,//返回层数，2则上上页
						})
				}
			},
			//点击学员
			chooseStudent(item, index) {
				this.classData = []
				this.studentIndex = index;
				this.showChooseStudent = false;
				this.forlist.name = item.name;
				this.forlist.mobile = item.mobile;
				this.forlist.head_img = item.head_img;
				this.forlist.id = item.id;
			},
			// 切换学员
			async chooseStudentData() {
				let param = {
					project_id: getApp().globalData.projectId,
					user_id: uni.getStorageSync("phone"),
					openid: uni.getStorageSync("openid"),
					appid: this.$https.weixinAppId,
				};
				let res = await index.students(param);
				if (res.code == 1) {
					res.data.studentList.forEach((item,index)=>{
						if (this.student_name == item.name) {
							this.cover = item.head_img
						}
					})
				}
			},
			onSwitch() {
				this.showChooseStudent = true;
			},
			
			// 获取今天当前日期
			getCurrentMonthDay() {
				var _this = this
				var now = new Date()
				var y = now.getFullYear()
				var m = now.getMonth() + 1
				var d = now.getDate()
				var h = now.getHours(); //获取当前小时数(0-23)
				var min = now.getMinutes(); //获取当前分钟数(0-59)
				if (m < 10) {
					m = '0' + m
				}
				if (d < 10) {
					d = '0' + d
				}
				if (h < 10) {
					h = '0' + h
				}
				if (min < 10) {
					min = '0' + min
				}
				var date = m + '/' + d
				var date_s = m + '-' + d
				_this.current_month_day = date_s
				_this.year_month_day = y + '-' + m + '-' + d 
				_this.year_month_daylsit = y + '-' + m + '-' + d
				_this.today = date
				_this.date_d = date
				_this.weeks_data = '今天'
				this.time_list = h + ':' + min
			},
			createWeekList() {
				// let nowDate = new Date()
				// this.nowMouth = nowDate.getMonth() + 1
				// let day = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
				// let weekList = [{
				// 	mouth: this.nowMouth.toString().padStart(2, '0'),
				// 	day: nowDate.getDate().toString().padStart(2, '0'),
				// 	weeks: '今天'
				// }]
				// for (let i = 1; i < 7; i++) {
				// 	let nextData = nowDate.setDate(nowDate.getDate() + i)
				// 	let Date2 = new Date(nextData)
				// 	weekList.push({
				// 		mouth: (Date2.getMonth() + 1).toString().padStart(2, '0'),
				// 		day: Date2.getDate().toString().padStart(2, '0'),
				// 		weeks: day[Date2.getDay()]
				// 	})
				// }
				// this.weekList = weekList
				// this.selectDay = weekList[0].day
				// console.log(this.weekList, '666')
				
				let day = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
				let dataList = []
				for (let i = 0; i < this.each_num.days; i++) {
					let date = new Date()
					this.nowMouth = date.getMonth() + 1
					let nextData = date.setDate(date.getDate() + i)
					let Date2 = new Date(nextData)
					let obj = {
						year: Date2.getFullYear().toString().padStart(2, '0'),
						mouth: (Date2.getMonth() + 1).toString().padStart(2, '0'),
						day: Date2.getDate().toString().padStart(2, '0'),
						weeks: day[Date2.getDay()]
					}
					if (i == 0) {
						obj.weeks = '今天'
					}
				
					dataList.push(obj)
					this.weekList = dataList
				}
			},
			href() {
				uni.navigateTo({
					url: "/page_admin/coach-side/class-home/class-sub/class-add"
				})
			},
			selectWeek(item,index) {
				this.list = []
				this.selectTime = ''
				this.course_hour_id = ''
				this.selectDay = item.day
				this.year_month_day = item.year + '-' + item.mouth + '-' + item.day
				this.dayActive = index
				this.hourlist()
			},
			handSelectlist(item,index){
				if ( item.status != 1) {
					uni.showToast({
						title: '此时间段不可预订',
						icon: 'none', //如果要纯文本，不要icon，将值设为'none'
						duration: 2000 //持续时间为 2秒
					})
					return
				}
			},
			handSelectTime(item, index) {
				console.log(item, index)
				let _this = this
				
				if (this.today == this.date_d) {
					
					if ( this.year_month_daylsit >= item.course_date  &&  item.end_time <= this.time_list) {
						uni.showToast({
							title: '已经过了时间段',
							icon: 'none', //如果要纯文本，不要icon，将值设为'none'
							duration: 2000 //持续时间为 2秒
						})
						return
					}
				}
				// 选中
				if (item.check) {
					// 取消
					if (this.list[index].backgroundImage){
						this.selectTime = ''
						this.course_hour_id = ''
						_this.$set(item, 'backgroundImage', '')
					}else{
						// 选中
						if(!this.index){
							this.index=0;
						}
						this.selectTime = index
						_this.$set(this.list[this.index], 'backgroundImage', '')
						_this.$set(item, 'backgroundImage', this.images)
						this.course_hour_id = item.id
					}
					
					this.index = index
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/css/common/common.scss';

	.control {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		padding-bottom: 160rpx;

		.group_4 {
			// flex: 1 ;
			// overflow-y: auto;

			.section_1 {
				background-color: #ffffff;

				.group_5 {
					padding: 21rpx 29rpx 32rpx 30rpx;
					border-bottom: solid 1rpx #efefef;

					.text_2 {
						color: #999999;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						line-height: 26rpx;
					}

					.text_3 {
						color: #333333;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						line-height: 26rpx;
					}

					.image_6 {
						margin-left: 17rpx;
						margin-bottom: 3rpx;
						flex-shrink: 0;
					}
				}

				.group_8 {
					padding: 20rpx 26rpx 20rpx 30rpx;
					border-bottom: solid 1rpx #efefef;

					.text_4 {
						align-self: center;
						color: #999999;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						line-height: 26rpx;
					}

					.text_5 {
						margin-left: 21rpx;
						align-self: center;
						color: #333333;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						line-height: 26rpx;
					}
				}

				.group_10 {
					padding: 22rpx 28rpx 20rpx 31rpx;

					.text_6 {
						align-self: center;
						color: #999999;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						line-height: 27rpx;
					}

					.text_7 {
						margin-left: 21rpx;
						align-self: center;
						color: #333333;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						line-height: 26rpx;
					}

					.image_10 {
						margin-left: 15rpx;
						flex-shrink: 0;
						align-self: center;
					}
				}

				.image_7 {
					flex-shrink: 0;
					width: 50rpx;
					height: 50rpx;
					border-radius: 50% 50%;
				}

				.image_5 {
					width: 12rpx;
					height: 21rpx;
				}
			}
		}

		.header {
			position: relative;

			image {
				width: 100%;
				display: block;
			}

			.info-box {
				position: absolute;
				left: 0;
				height: 100%;
				width: 100%;
				top: 0;
				display: flex;
				flex-direction: column;

				.info {
					padding: 30rpx 30rpx;
					display: flex;
					flex: 1;
					flex-direction: column;
					justify-content: space-between;

					.title {
						color: rgb(51, 51, 51);
						font-size: 30rpx;
						font-weight: 700;
					}

					.state {
						color: rgb(51, 51, 51);
						font-size: 28rpx;
						font-weight: 500;
					}

					.tag-list {
						margin-top: 21rpx;

						.tag {
							padding: 5rpx 20rpx 5rpx;
							font-size: 24rpx;
							font-weight: 500;
							background-color: rgb(255, 255, 255);
							border-radius: 40.5rpx;
							color: rgb(41, 166, 241);
							margin-right: 20rpx;

							&:nth-of-type(2) {
								color: rgb(255, 143, 5);
							}
						}
					}

					.info-item {
						margin-right: 50rpx;
						color: rgb(51, 51, 51);
						font-size: 20rpx;
						font-weight: 500;

						&:last-of-type {
							margin-left: 0;
						}

						text {
							margin-left: 4rpx;
						}
					}
				}
			}
		}

		.notify {
			padding: 27rpx 19rpx 26rpx 30rpx;
			color: rgb(40, 40, 40);
			font-size: 24rpx;
			font-weight: 500;
			background-color: rgb(243, 243, 243);

			@for $i from 1 through 10 {
				.img:nth-of-type(#{$i+1}) {
					transform: translateX(-10rpx * $i);
				}
			}

		}

		.title-box {
			margin: 40rpx 30rpx;
			color: rgb(47, 117, 250);
			font-size: 28rpx;
			font-weight: 500;
			border-left: 6rpx solid rgb(0, 108, 255);


			.title {
				color: rgb(51, 51, 51);
				font-size: 30rpx;
				padding-left: 20rpx;
				font-weight: 700;
			}
		}

		.week-list {
			padding: 8rpx 13rpx 8rpx 0rpx;
			background-color: rgb(247, 247, 247);

			.mouth {
				display: flex;
				flex-direction: column;
				align-items: center;
				color: rgb(48, 48, 48);
				font-size: 24rpx;
				font-weight: 700;
				padding: 0 22rpx;
			}

			.week-item {
				color: rgb(51, 51, 51);
				font-size: 24rpx;
				font-weight: 700;
				padding: 15rpx 0 19rpx;
				flex: 1;
				border-radius: 10rpx;
				display: flex;
				letter-spacing: -0.48rpx;
				flex-direction: column;
				align-items: center;

				view:last-of-type {
					font-size: 20rpx;
					margin-top: 5rpx;
					letter-spacing: -0.36rpx;
				}
			}

			.active {
				background-color: rgb(64, 129, 252);
				color: rgb(255, 255, 255);
			}
		}

		.scroll {
			flex: 1;
			height: 0;
			overflow: auto;
		}

		.time-list {
			display: grid;
			padding: 29rpx 30rpx 31rpx;
			grid-template-columns: 1fr 1fr 1fr;
			grid-row-gap: 22rpx;
			grid-column-gap: 22rpx;

			.time-item {
				box-shadow: 0px 3rpx 9.2rpx 0.8rpx rgba(0, 0, 0, 0.04);
				border-radius: 20rpx;
				overflow: hidden;
				background-color: rgba(47, 117, 250, 0.1);
				border: 3rpx solid transparent;
				color: #333333;
				background-size: 100% 100%;
				.scc {
					width: 100%;
					height: 120rpx;
					.top {
						padding: 25rpx 0;
						color: rgb(51, 51, 51);
						font-size: 28rpx;
						font-weight: 700;
						text-align: center;
						line-height: 24rpx;
					}

					.bottom {
						color: rgb(51, 51, 51);
						font-size: 22rpx;
						font-weight: 500;
						text-align: center;
						padding: 6rpx 0 7rpx;
						background-color: rgba(47, 117, 250, 0.1);
					}
				}

			}



			.disabled {
				background-color: rgb(243, 243, 243);

				.scc {
					.top {
						color: rgb(153, 153, 153);
					}

					.bottom {
						color: rgb(153, 153, 153);
						background-color: rgba(50, 50, 50, 0.1);
					}
				}


			}

			.select-ash {
				background-color: rgba(47, 117, 250, 0.1);
				border-color: rgb(47, 117, 250);

				.scc {
					.top {
						color: rgb(47, 117, 250);
					}

					.bottom {
						color: rgb(47, 117, 250);
						// background-color: rgba(176, 184, 255, 0.1);
						background-color: rgb(215, 228, 254);
					}
				}


			}

			.active {
				background-color: rgba(92, 121, 250, 0.1);
				// border-color: rgb(47, 117, 250);
				// border: none;

				.scc {
					.top {
						color: rgb(0, 0, 0);
					}

					.bottom {
						color: rgb(0, 0, 0);
						background-color: rgb(215, 228, 254);
					}
				}



			}
		}

		.note {
			padding: 0px 30rpx;

			/deep/ .textarea-placeholder {
				font-size: 28rpx;
				color: rgb(153, 153, 153);
				font-weight: 400;
			}

			textarea {
				width: 100%;
				background-color: #f3f3f3;
				border-radius: 10rpx;
				box-sizing: border-box;
				padding: 20rpx;
				font-size: 28rpx;
				font-weight: 500;
			}
		}

		.footer {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			padding: 20rpx 20rpx;
			box-sizing: border-box;
			box-shadow: 0px -8rpx 51rpx rgba(0, 0, 0, 0.04);
			z-index: 999;

			.btn {
				color: rgb(255, 255, 255);
				background-image: linear-gradient(0deg,  rgb(47, 117, 250) 0%, rgb(215, 228, 254) 100%);
				border-radius: 60rpx;
				padding: 26rpx 0;
				font-size: 30rpx;
				text-align: center;
				font-weight: 700;
			}

		}

		.choose-student {
			padding: 80rpx 30rpx;

			.title {
				font-size: 36rpx;
				font-weight: bold;
				text-align: center;
			}

			.student-list {
				margin-top: 60rpx;
				max-height: 600rpx;
				min-height: 530rpx;

				.student-item {
					background-color: #f3f3f3;
					padding: 30rpx 40rpx;
					border-radius: 20rpx;
					height: 120rpx;

					&+.student-item {
						margin-top: 30rpx;
					}

					.name {
						font-size: 25rpx;
						font-weight: bold;
						margin-right: 20rpx;
					}

					.course {
						color: #c1c1c1;
						font-size: 25rpx;
						margin-top: 30rpx;
					}
				}
			}
		}
	}
</style>
